<!--首页组件，展示欢迎信息、用户状态和系统功能导航-->
<template>
  <Layout>
    <div class="home-container">
      <el-card shadow="hover" class="welcome-card">
        <div class="welcome-message">
          <h2>欢迎回来，{{ userStore.user?.username }}！</h2>
          <p>今天是 {{ today }}</p>
        </div>
        
        <div class="stats-grid">
          <el-card class="stat-card">
            <div class="stat-title">账户状态</div>
            <div class="stat-value">正常</div>
          </el-card>
          
          <el-card class="stat-card">
            <div class="stat-title">用户角色</div>
            <div class="stat-value">{{ userStore.user?.role === 'admin' ? '管理员' : '普通用户' }}</div>
          </el-card>
          
          <el-card class="stat-card">
            <div class="stat-title">登录时间</div>
            <div class="stat-value">{{ formattedLoginTime }}</div>
          </el-card>
        </div>
      </el-card>
      
      <el-card shadow="hover" class="features-card">
        <h3>系统功能</h3>
        <div class="features-grid">
          <el-card class="feature-item" @click="$router.push('/profile')">
            <el-icon class="feature-icon"><User /></el-icon>
            <div class="feature-name">个人中心</div>
            <div class="feature-desc">查看和编辑个人信息</div>
          </el-card>
          
          <el-card class="feature-item" @click="$router.push('/about')">
            <el-icon class="feature-icon"><InfoFilled /></el-icon>
            <div class="feature-name">关于系统</div>
            <div class="feature-desc">查看系统相关信息</div>
          </el-card>
          
          <el-card 
            class="feature-item" 
            @click="$router.push('/admin')"
            v-if="userStore.isAdmin"
          >
            <el-icon class="feature-icon"><Setting /></el-icon>
            <div class="feature-name">管理员功能</div>
            <div class="feature-desc">管理系统用户和配置</div>
          </el-card>
        </div>
      </el-card>
    </div>
  </Layout>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useUserStore } from '../stores/user'
import Layout from '../components/Layout.vue'
import { User, InfoFilled, Setting } from '@element-plus/icons-vue'

// 用户状态
const userStore = useUserStore()

// 日期相关
const today = ref('')
const formattedLoginTime = ref('')

// 格式化日期
const formatDate = (date: Date): string => {
  return new Intl.DateTimeFormat('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    weekday: 'long'
  }).format(date)
}

// 格式化时间
const formatTime = (date: Date): string => {
  return new Intl.DateTimeFormat('zh-CN', {
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  }).format(date)
}

onMounted(() => {
  // 初始化日期显示
  const now = new Date()
  today.value = formatDate(now)
  formattedLoginTime.value = formatTime(now)
  
  // 如果没有用户信息，获取一下
  if (userStore.isLoggedIn && !userStore.user) {
    userStore.fetchCurrentUser()
  }
})
</script>

<style scoped>
.home-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.welcome-card {
  padding: 20px;
}

.welcome-message {
  margin-bottom: 20px;
}

.welcome-message h2 {
  margin: 0 0 10px 0;
  color: #1E293B;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
}

.stat-card {
  text-align: center;
  padding: 15px;
  background-color: #F8FAFC;
}

.stat-title {
  color: #64748B;
  font-size: 14px;
  margin-bottom: 10px;
}

.stat-value {
  font-size: 18px;
  font-weight: bold;
  color: #1E293B;
}

.features-card {
  padding: 20px;
}

.features-card h3 {
  margin: 0 0 20px 0;
  color: #1E293B;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}

.feature-item {
  padding: 20px;
  text-align: center;
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;
}

.feature-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.feature-icon {
  font-size: 36px;
  color: #165DFF;
  margin-bottom: 15px;
}

.feature-name {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #1E293B;
}

.feature-desc {
  color: #64748B;
  font-size: 14px;
}
</style>
